<template>
    <div class="container">
  
      <el-form label-width="100px" :model="form" >
  
          <el-form-item label="用户名"  prop="title">
        <el-input v-model="title" style="width: 100px;"></el-input>
      </el-form-item>

      <el-form-item label="性别"  prop="sex">
        <el-input v-model="sex" style="width: 100px;"></el-input>
      </el-form-item>

      <el-form-item label="所属部门">
        <el-select v-model="department" placeholder="请选择" style="width: 200px;">
          <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
            
      <el-row class="search">
      <el-col :span="2">
        <el-form-item>
          <el-button type="primary" @click="search()">搜索</el-button>
        </el-form-item></el-col>

        <el-col :span="2">
        <el-form-item>
          <el-button type="primary" @click="shuaXin()">刷新</el-button>
        </el-form-item></el-col>

        <el-col :span="2">
        <el-form-item>
          <el-button type="primary"  @click="deleteselected()">批量删除</el-button>
        </el-form-item></el-col>
    </el-row>
        </el-form>

    <el-table :data="props.tableData" stripe @row-dblclick="dialogdetail" @selection-change="handleSelectionChange" >
      <el-table-column type="selection"  width="80" align="center"  />
      <el-table-column type="index" label="序号" width="80" align="center" show-overflow-tooltip />
      <el-table-column prop="name" label="用户名" width="120"  align="center" show-overflow-tooltip/>
      <el-table-column prop="gender" label="性别" width="80"  align="center" show-overflow-tooltip/>
      <el-table-column prop="age" label="年龄" width="80"  align="center" show-overflow-tooltip/>
      <el-table-column prop="department" label="部门" width="100"  align="center" show-overflow-tooltip/>
      <el-table-column prop="kpi" label="kpi" width="80"  align="center" show-overflow-tooltip/>
      <el-table-column prop="address" label="地址" width="80"  align="center" show-overflow-tooltip/>

      <el-table-column prop="create_time" label="创建时间" width="180"  align="center" show-overflow-tooltip>
        <template #default="scope">  
        <!-- 使用 moment.js 格式化时间 -->  
        {{ moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}  
      </template>
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间" width="180"  align="center" show-overflow-tooltip>
        <template #default="scope">  
        <!-- 使用 moment.js 格式化时间 -->  
        {{ moment(scope.row.update_time).format('YYYY-MM-DD HH:mm:ss') }}  
      </template>
      </el-table-column>
      
  
      <el-table-column label="操作" width="180" align="center" show-overflow-tooltip>
        <template #default="scope">
          <el-icon  @click="edit(scope.row.id)" style=" padding: 2px; color: blue;">
            <EditPen />
          </el-icon>
          <el-icon style="padding: 2px; color:red;" @click="deleteD(scope.row.id)">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="员工详情" width="500" :before-close="handleClose">
      <p>员工id：{{ listdata.id }}</p>
      <p>员工姓名：{{ listdata.name }}</p>
      <p>员工性别：{{ listdata.gender }}</p>
      <p>员工年龄：{{ listdata.age }}</p>
      <p>员工部门：{{ listdata.department }}</p>
      <p>员工kpi：{{ listdata.kpi }}</p>
      <p>员工地址：{{ listdata.address }}</p>
      <p>员工创建时间：{{ listdata.create_time }}</p>
      <p>员工更新时间：{{ listdata.update_time }}</p>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>    
        </div>
      </template>
    </el-dialog>

    </div>
  </template>
  
  <script setup>
  import { defineProps, ref,onMounted } from 'vue';
  import { Delete, EditPen } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router';
  import moment from 'moment';  
  import axios from 'axios';
  const router = useRouter();
  var title=ref('')
  var sex=ref('')
  var department=ref('')
  var deletedata = ref([])

  // 接受父组件传过来的值
  // 声明 props
  const props = defineProps({
    tableData: {
      type: Array
    }
  });

  var form=ref({
    title:title,
    sex:sex,
    department:department
  })

  const projects = ref([
    { value: '产品部门', label: '产品部门' },
    { value: '测试部门', label: '测试部门' },
    { value: '开发部门', label: '开发部门' },
    { value: '项目部门', label: '项目部门' },
  ]);

  const departments = ref([]);

  onMounted(()=>{
    featchData()
  })
  
  // defineEmits 定义了emit
  import { defineEmits } from 'vue';
  const emit = defineEmits();
  function  deleteD(id) {
    emit('deleteD', id)
  }
  
  //
  function edit(id) {
  router.push('/editemployee/' + id);
  
}

//刷新
function shuaXin(){
  window.location.reload()
}

//双击
//function shuangji(data){
  //router.push('/showemployee/'+data.id)
//}

//员工详情弹窗页面
var dialogVisible=ref(false)
var listdata=ref([])
function dialogdetail(data) {
  console.log("双击，看看数据data:", data);
  // router.push("/showbook/" + data.id);
  dialogVisible.value = true;
  listdata.value = data;
}



//批量选择传过来的数据
function handleSelectionChange(data){
  console.log("想看看批量选择时得到的数据：", data)
  deletedata.value = data
}

//批量删除
function deleteselected(){
  emit("deleteselected", deletedata.value)
}

function search(){
  console.log("看看form.value的数据:", title.value)
  emit("searchparent", title.value)

}

function featchData(){
  axios.get('http://localhost:8000/test/getdepartments/')
  .then(res => {
    console.log(res)
    departments.value=res.data.data
  })
  .catch(err => {
    console.error(err); 
  })
}
  
  </script>
  
  <style >
  el-table-column{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>